<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="{% url 'shangpinadmin:goods_detailed' goods_obj.id %}">设置详细信息</a> <br />
商品的分类：
{% for i in goods_obj.category.all %}
    {{ i.name }}---
{% endfor %}
<p>售出量：{{ goods_obj.sales_count }}</p>

{% if conditions %}
    {% for goods in conditions %}
        <p>{{ goods.size.size_kind }}为{{ goods.size_name }}颜色{{ goods.color.color_name }}
        的有{{ goods.good_count }}</p>
    {% endfor %}
{% endif %}


<form action="{% url 'shangpinadmin:set_goods' goods_obj.id %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
<div class="input-file-box">
	<span>点击上传图片</span>
	<input type="file" name="file" id="uploadfile" multiple>
    <input type="file" name="file" id="uploadfile" multiple>
    <input type="file" name="file" id="uploadfile" multiple>
    <input type="file" name="file" id="uploadfile" multiple>
    <input type="file" name="file" id="uploadfile" multiple>
</div>
<div id="img-box"></div>

    {% for key,value in info_dict.items %}
        {{ key }}<input type="text" value="{{ value }}" name="goodsinfo"><br />
    {% endfor %}
    <button type="submit">提交</button>
</form>



<div id="img-box"></div>
<script>
    window.onload=function(){
        var input=document.getElementById("uploadfile");
        var div;
        // 当用户上传时触发事件
        input.onchange=function(){
            readFile(this);
        }
        //处理图片并添加都dom中的函数
        var readFile=function(obj){
            // 获取input里面的文件组
            var fileList=obj.files;
            //对文件组进行遍历，可以到控制台打印出fileList去看看
            for(var i=0;i<fileList.length;i++){
                var reader= new FileReader();
                reader.readAsDataURL(fileList[i]);
                 // 当文件读取成功时执行的函数
                reader.onload=function(e){
                    img=document.createElement('img');
                    img.src=this.result;
                    img.width="300";
                    img.height="488";
                    document.getElementById("img-box").appendChild(img);
                }
            }
        }
    }

</script>

</body>
</html>